<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElTable } from 'element-plus'
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import type { FormInstance, FormRules } from 'element-plus'
import type { TypeAll, ruleType } from "./BasicType/MainType"

const { log } = console
interface User {
  date: string
  name: string
  address: string
  tag: string
}
interface Product {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}
interface TestInter<T> {
  name: string
  age: T
}

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

// 长这样？
// const tableRef = ref<InstanceType<typeof ElTable>>()
const tableRef = ref()

const resetDateFilter = () => {
  tableRef.value!.clearFilter(['date'])
}
// TODO: improvement typing when refactor table
const clearFilter = () => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  tableRef.value!.clearFilter()
}
const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.address.split(",")[0]
}
const filterTag = (value: string, row: User) => row.tag === value
const filterHandler = (
  value: string,
  row: User,
  column: TableColumnCtx<User>
) => {
  // const property = column['property']
  // return row[property] === value  
  return row.date === value
}

const tableData: Array<User> = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
]


// 为reactive注入类型

// interface TypeSta {
//   title: string
//   age: number
// }
// interface TypeFun<T> {
//   getTitle: (value: T) => T
//   setTitle: (value: T) => void
// }

// interface TypeAll extends TypeSta, TypeFun<string> {
//   isOk?: boolean
// };

// TypeAll限定了reactive中有哪些属性和这些属性的类型
const data1 = reactive<TypeAll>({
  title: "23",
  age: 12,
  getTitle: (value: string) => {
    return value
  },
  setTitle(value: string) {
    log(this)
    this.title = "232s"
  }
})

// log(data1.title)
// data1.setTitle("23")

// 泛型方法，定义，
const getProp = <T, K extends keyof T>(val1: T, val2: K): T[K] => {
  return val1[val2]
}

interface KeyType {
  title: string
  age: number
}
type K1 = keyof KeyType

// type KeyTypeOption<allT> = {
//   [k in keyof allT]?: allT[k]
// }
let obj3: Partial<KeyType> = {
  // 可以没有
},
  obj4: KeyType = {
    title: "554",
    age: 51
  },
  obj5: Pick<KeyType, "age"> = {
    age: 5
  }

// log(getProp({ title: "nh", age: 20 }, "title"))

const typeFun = <KeyType, T extends keyof KeyType>(value: KeyType, key: T): KeyType[T] => {
  return value[key]
}
log(typeFun({ title: "nh", age: 20 }, "age"))

interface Obj1 {
  age: number
}
let obj1: Obj1 = { age: 8 }
log(obj1.age)

const divWidth = ref(50)
</script>
<template>
  <div style="width: 60%;">
    <el-button @click="resetDateFilter">reset date filter</el-button>
    <el-button @click="clearFilter">reset all filters</el-button>
    <div style="background-color: burlywood;" class="table">
      <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 90%">
        <!-- <el-table-column type="index" /> -->
        <el-table-column prop="date" label="Date" width="180" column-key="date" :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]" :filter-method="filterHandler" />
        <el-table-column prop="name" label="Name" width="180" id="aaa" />
        <el-table-column prop="address" label="Address" :formatter="formatter" />

        <el-table-column prop="tag" label="Tag" width="100" :filters="[
          { text: 'Home', value: 'Home' },
          { text: 'Office', value: 'Office' },
        ]" :filter-method="filterTag" filter-placement="bottom-end">
          <template #default="scope">
            <el-tag :type="scope.row.tag === 'Home' ? '' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <el-input v-model="divWidth" placeholder="" size="normal" clearable @change=""></el-input>
    
    <div :style="{ 'width': divWidth + 'px', 'height': '20px' ,'background-color':'tomato'}"></div> -->

    <!-- <div id="anDiv"></div> -->
    <div id="hoverDiv"></div>
  </div>
</template>

<style lang="less">
.el-table--fit {
  background-color: transparent !important;
}

.el-table__row {
  background-color: transparent !important;
}

.el-table__header-wrapper {
  tr {
    background-color: transparent !important;

    th {
      background-color: transparent !important;
      color: blue;
    }
  }
}

.el-table {
  --el-table-border-color: transparent !important;
}

.el-table_1_column_1 {
  color: blueviolet;
}

#anDiv {
  width: 200px;
  height: 200px;
  margin-top: 50px;
  // border-radius: 50%;
  background-color: aquamarine;
  animation: biger 3s infinite;
}

@keyframes biger {
  0% {
    width: 200px;
    height: 200px;

  }

  50% {
    width: 400px;
    height: 400px;
    background-color: rgb(21, 21, 21);
    transform: rotate(180deg);
  }

  100% {
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
  }
}

#hoverDiv{
  width: 200px;
  height: 200px;
  margin-top: 50px;
  background-color: aquamarine;
  transition: all 1s;
  &:hover{
    width: 400px;
    height: 400px;
    transform: rotate(180deg);
    background-color: blueviolet;
  }
}

</style>